<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="topImageBox">
				<view class="bacImgBox">
					<image src="../../static/assets/2705550526279515381923cdca6b25b.png" class="bacImg" />
				</view>
				<block v-if="vuex_has_login">
					<image :src="vuex_user.avatar ? vuex_user.avatar : 'static/icon/default_thumb.svg'"
						class="avator" />
					<view class="user">昵称：{{vuex_user.nickname}}</view>
				</block>
				<block v-else>
					<view class="image-wrapper">
						<image src="/static/icon/default_thumb.svg" class="image_1" />
					</view>
					<view class="login" @click="isShowLogin()">点击登录</view>
				</block>
			</view>
			<view class="flex-col group_1">
				<text class="text_1">会员专享</text>
				<view class="flex-row equal-division">
					<view class="justify-center equal-division-item" @click="itemClick(2)">
						<image src="@/static/icon/32px/card.svg" class="image_2" />
						<text class="text_2">会员卡券</text>
					</view>
					<view class="justify-center equal-division-item_1" @click="itemClick(1)">
						<image src="@/static/icon/32px/money.svg" class="image_3" />
						<text class="text_3">充值活动</text>
					</view>
				</view>
				<view class="flex-row equal-division col-6">
					<view class="justify-center equal-division-item" @click="itemClick(0)">
						<image src="@/static/icon/32px/discount.svg" class="image_2" />
						<text class="text_2">抢优惠券</text>
					</view>
					<view class="justify-center equal-division-item_1" style="border: none; box-shadow: none;">
					</view>
				</view>
			</view>
		</view>
		<popUp :show="show" @close="close"></popUp>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				show: false,
			};
		},
		methods: {
			itemClick(item) {
				if (!this.vuex_has_login) {
					this.$u.toast('请先登录');
					return
				}
				switch (item) {
					case 0:
						this.$u.route({
							url: 'pages/members/couponZone'
						});
						break;
					case 1:
						this.$u.route({
							url: 'pages/myCenter/balanceRecharge'
						});
						break;
					case 2:
						this.$u.route({
							url: 'pages/members/membersVoucher'
						});
						break;
				}
			},
			isShowLogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.$u.api.userLoginApi({
							code: res.code
						}).then(res => {
							if (res.code == 1) {
								this.vuex_login(res)
							} else {
								uni.hideTabBar()
								this.show = true
							}
						})
					},
					fail: (err) => {
						console.log(err);
					},
				})

			},
			//  关闭弹窗
			close() {
				this.show = false
				uni.showTabBar()
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		height: 100%;

		.group {
			padding-bottom: 658rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.topImageBox {
				position: relative;
				width: 100vw;
				height: 47.5vw;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.bacImgBox {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;

					.bacImg {
						width: 100%;
						height: 100%
					}
				}

				.image-wrapper {
					margin-top: 90rpx;
					// padding: 8rpx 0;
					// background-color: rgba(226, 157, 182, 0.5);
					border-radius: 50%;
					width: 120rpx;
					height: 120rpx;
					// border: solid 2rpx rgb(216, 88, 134);
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 5;

					.image_1 {
						width: 100%;
						height: 100%;
					}
				}

				.login {
					margin-top: 16rpx;
					width: 144rpx;
					// height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #333333;
					line-height: 60rpx;
					border-bottom: 2rpx solid #000000;
					z-index: 5;
				}

				.avator {
					margin-top: 90rpx;
					width: 120rpx;
					height: 120rpx;
					z-index: 5;
					border-radius: 50%;
				}

				.user {
					margin-top: 24rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 50rpx;
					z-index: 5;
				}
			}


			.group_1 {
				margin-top: 58rpx;
				padding: 0 24rpx;

				.text_1 {
					color: rgb(51, 51, 51);
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					white-space: nowrap;
				}

				.equal-division {
					margin-top: 40rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					letter-spacing: 3.6rpx;
					white-space: nowrap;

					.equal-division-item {
						padding: 42rpx 54rpx;
						flex: 1 1 330rpx;
						background-color: rgb(255, 255, 255);
						box-shadow: 0px 4rpx 8rpx 0px rgb(238, 235, 236);
						border-radius: 16rpx;
						height: 152rpx;
						border: solid 2rpx rgb(236, 236, 236);
						position: relative;

						.image_2 {
							width: 62rpx;
							height: 64rpx;
						}

						.text_2 {
							margin-left: 28rpx;
							align-self: center;
						}
					}

					.equal-division-item_1 {
						margin-left: 40rpx;
						padding: 42rpx 50rpx;
						flex: 1 1 330rpx;
						background-color: rgb(255, 255, 255);
						box-shadow: 0px 4rpx 8rpx 0px rgb(238, 235, 236);
						border-radius: 16rpx;
						height: 152rpx;
						border: solid 2rpx rgb(236, 236, 236);

						.image_3 {
							border-radius: 50%;
							width: 64rpx;
							height: 64rpx;
						}

						.text_3 {
							margin-left: 32rpx;
							align-self: center;
						}
					}
				}
			}
		}


	}
</style>